<template>
	<view :class="isshow?'isding':''">
		<view v-if="info.status!='1'" class="" style="min-height: 100vh; background:#29A85C ;">
			<view class="block_1">
				<image class="img1" :src="imgurl+'/p11.png'" mode=""></image>
				<view class="block" v-if="info==null">
					<image class="img1" :src="imgurl+'/ptext.png'" mode=""></image>
					<view class="btn" @click="pageGo('/mypage/proxy/proxyfrom')">
						去填写
					</view>
				</view>
				<view class="block" v-else>
					<image class="img1" :src="imgurl+'/ptext.png'" mode=""></image>
					<view class="">
						<image class="img2" src="../../static/dui.png" mode=""></image>
					</view>
					<view class="t1">
						申请已提交
					</view>
					<view class="t2">
						您的申请已提交，请您耐心等待
					</view>
					<view class="btn1" @click="pageuser">
						我知道了
					</view>
				</view>
			</view>

			<view class="block_2" v-if="info==null">
				<view class="items">
					<image :src="imgurl+'/p2.png'" mode=""></image>
					输入自己的联系信息
				</view>
				<view class="items">
					<image :src="imgurl+'/p3.png'" mode=""></image>
					提交等待审核结果
				</view>
				<view class="items">
					<image :src="imgurl+'/p4.png'" mode=""></image>
					成功成为代理商
				</view>
			</view>
			<view class="" style="height: 20rpx;"></view>
		</view>

		<view class="block_3" v-else-if="info.status=='1'">

			<view class="b1">
				<view class="tit_flex">
					<image :src="user.headImg?user.headImg:'/static/toux.png'" mode=""></image>
					<view class="test">
						{{user.nickName}}
					</view>
				</view>
				<view class="b2">
					<image :src="imgurl+'/p5.png'" mode=""></image>
					<view class="abs">
						<view class="img1">
							<image :src="imgurl+'/p6.png'" mode=""></image>
							<view class="">
								我的可用余额(元)
							</view>
						</view>
						<view class="price">
							<view class="p1">
								{{info.amount}}
							</view>
							<view class="btn" @click="pageGo('/mypage/proxy/tx')">
								提现
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="b3">
				<view class="img1">
					<image :src="imgurl+'/p7.png'" mode="" @click="opens"></image>
				</view>
				<view class="img2">
					<image :src="imgurl+'/p8.png'" mode="" @click="pageGo('/mypage/proxy/billlist')"></image>
					<image :src="imgurl+'/p9.png'" mode="" @click="pageGo('/mypage/proxy/shoplist')"></image>
				</view>
			</view>
		</view>


		<uni-popup @change="popchange" ref="popup" type="center">
			<view class="popup">
				<view class="popimg">
					<image :src="imgs" mode=""></image>
					<view class="icon" @click="close">
						<uni-icons size="34" color="#fff" type="close"></uni-icons>
					</view>
					<view class="btn" @click="saveImage">
						<view class="">
							<image src="../../static/user/down.png" mode=""></image>
							<view class="">
								保存图片
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<canvas v-if="isshow" canvas-id="myCanvas" :style="{ width: canvasWidth, height: canvasHeight }"></canvas>
	</view>
</template>

<script>
	import {
		userAgent,
		userQr
	} from '@/common/http.api.js';
	import {
		base64ToPath,
		pathToBase64
	} from './index.js'
	export default {
		data() {
			return {
				imgurl: getApp().globalData.WEBIMG,
				canvasWidth: 375, //画布宽度
				canvasHeight: 812, //画布高度
				ratio: 0, //计算UI设计稿和你手机的屏幕宽度比例（例如UI设计稿是750宽度 你手机是350宽度 比例就是2  那么你画布画图时候 所有的尺寸大小、宽高、位置、定位左右上下都需要除以 / 比例2 ）
				widths: '',
				heights: '',
				imgs: '',
				isshow: false,
				myObj: {
					bgImg: getApp().globalData.WEBIMG + '/bcg1.png',
					juan: getApp().globalData.WEBIMG + '/bcgc.png',
					nickName: '',
					headImg: '',
					rwm: 'http://usr/tmp_base64src.jpeg'
				},
				info: null,
				user: {}
			};
		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: '伊可库欢迎你！',
		// 		imageUrl:this.myObj.rwm,
		// 		path: `/pages/index/index`,
		// 	}
		// },
		// onShareTimeline(res) {
		// 	return {
		// 		title: '伊可库欢迎你！',
		// 		imageUrl: this.myObj.rwm,
		// 		path: `/pages/index/index`,
		// 	}
		// },
		onShow() {
			this.user = uni.getStorageSync('userInfo')
			this.myObj.nickName = this.user.nickName
			this.myObj.headImg = this.user.headImg
			userAgent({}).then(res => {
				if (res.code == 200) {
					this.info = res.data
				}
			})
		},
		onLoad() {
			let that = this
			userQr({}).then(res => {
				that.base64ToPaths(res.data.images).then(resimg=>{
					that.myObj.rwm = resimg
				})
			})
			uni.getSystemInfo({
				success: res => {
					// res.screenWidth 设备宽度
					that.canvasWidth = res.screenWidth + 'px'
					that.widths = res.screenWidth
					that.ratio = 750 / res.screenWidth
					that.canvasHeight = (that.widths / 375) * 812 + 'px'
					that.heights = (that.widths / 375) * 812
				}
			})
		},
		methods: {
			base64ToPaths(base64data,FILE_BASE_NAME='tmp_base64src') {
				const fsm = uni.getFileSystemManager();
				return new Promise((resolve, reject) => {
				//format这个跟base64数据的开头对应
					const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
					if (!format) {
						reject(new Error('ERROR_BASE64SRC_PARSE'));
					}
					const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
					const buffer = wx.base64ToArrayBuffer(bodyData);
					fsm.writeFile({
						filePath,
						data: buffer,
						encoding: 'binary',
						success() {
							resolve(filePath);
						},
						fail() {
							reject(new Error('ERROR_BASE64SRC_WRITE'));
						},
					});
				});
			},
			pageGo(url) {
				uni.navigateTo({
					url
				})
			},
			pageuser() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			close() {
				this.$refs.popup.close()
			},
			downImgUrl() {
				let that = this
				uni.getImageInfo({
					src: that.myObj.bgImg,
					success: function(res) {
						that.myObj.bgImg = res.path
						uni.getImageInfo({
							src: that.myObj.juan,
							success: function(res) {
								that.myObj.juan = res.path
								if(that.myObj.headImg){
									uni.getImageInfo({
										src: that.myObj.headImg,
										success: function(res) {
											that.myObj.headImg = res.path
											that.drawPageImg()
										}
									});
								}else{
									that.myObj.headImg = '/static/toux.png'
									that.drawPageImg()
								}
							}
						});
					}
				});
			},
			opens() {
				let that = this
				uni.showLoading({
					title: '海报生成中...'
				});
				this.isshow = true
				this.downImgUrl()
			},
			popchange(e) {
				this.isshow = e.show
			},
			drawPageImg() {
				let _this = this
				console.log(_this.myObj.headImg);
				// 生成画布
				const ctx = uni.createCanvasContext('myCanvas', _this)
				// // 背景图
				ctx.drawImage(_this.myObj.bgImg, //图像资源
					(0 / _this.ratio), //图像的左上角在目标canvas上 X 轴的位置
					(0 / _this.ratio), //图像的左上角在目标canvas上 Y 轴的位置
					(750 / _this.ratio), //在目标画布上绘制图像的宽度
					(1624 / _this.ratio) //在目标画布上绘制图像的高度
				)
				ctx.drawImage(_this.myObj.juan, //图像资源
					(60 / _this.ratio), //图像的左上角在目标canvas上 X 轴的位置
					(242 / _this.ratio), //图像的左上角在目标canvas上 Y 轴的位置
					(630 / _this.ratio), //在目标画布上绘制图像的宽度
					(1064 / _this.ratio) //在目标画布上绘制图像的高度
				)
				_this.ctxCircular(ctx, _this.myObj.headImg, (94 / _this.ratio), (284 / _this.ratio), (80 /
					_this
					.ratio), (
					80 / _this.ratio), 40 / _this.ratio)

				_this.ctxText(ctx,
					'26px bold,PingFang SC',
					'left',
					'#242424',
					_this.myObj.nickName, 206 / _this.ratio, 342 / _this.ratio)
				_this.ctxCircular(ctx, _this.myObj.rwm, (208 / _this.ratio), (780 / _this.ratio), (336 /
						_this
						.ratio),
					(336 / _this.ratio), 10)
				_this.ctxText(ctx,
					'14px Arial,PingFang SC',
					'center',
					'#979797',
					'长按识别上方二维码，成为商家', 375 / _this.ratio, 1180 / _this.ratio)
				_this.ctxText(ctx,
					'14px Arial,PingFang SC',
					'center',
					'#979797',
					'加入我们吧', 375 / _this.ratio, 1220 / _this.ratio)
				// 渲染画布
				ctx.draw(false, (() => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							destWidth: _this.canvasWidth *
								2, //展示图片尺寸=画布尺寸1*像素比2
							destHeight: _this.canvasHeight * 2,
							quality: 1,
							fileType: 'jpg',
							success: (res) => {
								uni.hideLoading()
								console.log('通过画布绘制出的图片--保存的就是这个图', res
									.tempFilePath)
								_this.imgs = res.tempFilePath
								this.$refs.popup.open()
							},
							fail: function(error) {
								console.log(error);
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: "绘制图片失败", // res.tempFilePath
								})
							}
						}, _this)

					}, 100)
				})())
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgs,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "已保存到系统相册",
						})
					},
					fail: function(error) {
						uni.showModal({
							title: '提示',
							content: '若点击不授权，将无法使用保存图片功能',
							cancelText: '不授权',
							cancelColor: '#999',
							confirmText: '授权',
							confirmColor: '#f94218',
							success(res) {
								console.log(res)
								if (res.confirm) {
									// 选择弹框内授权
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									})
								} else if (res.cancel) {
									// 选择弹框内 不授权
									console.log('用户点击不授权')
								}
							}
						})
					}
				})
			},
			//画一个带圆角矩形
			ctxCircular(ctx, img, x, y, width, height, r, shadow) {
				ctx.beginPath() //开始绘制
				ctx.save() //保存(canvas)状态
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + width - r, y)
				ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.lineTo(x + width, y + height - r)
				ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5)
				ctx.lineTo(x + r, y + height)
				ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI)
				ctx.lineTo(x, y + r)
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				if (shadow == 1) {
					ctx.shadowBlur = 20; // 模糊效果程度的
					ctx.shadowColor = 'red'; // 阴影颜色
				}
				ctx.fill() //对当前路径中的内容进行填充
				ctx.clip() //从原始画布中剪切任意形状和尺寸
				ctx.closePath() //关闭一个路径
				ctx.drawImage(img, x, y, width, height);
				ctx.restore() //恢复(canvas)状态
			},
			//画一个矩形也就是整个海报的背景
			ctxRectangle(ctx, x, y, width, height, r, gnt) {
				ctx.beginPath()
				ctx.save() //保存状态
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + width - r, y)
				ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.lineTo(x + width, y + height - r)
				ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5)
				ctx.lineTo(x + r, y + height)
				ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI)
				ctx.lineTo(x, y + r)
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				ctx.fillStyle = gnt
				ctx.fill() //对当前路径中的内容进行填充
				ctx.closePath() //关闭一个路径
			},
			ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y) {
				ctx.beginPath()
				ctx.save() //保存状态
				//字体
				ctx.font = textFont,
					//字体样式
					ctx.textAlign = textAlign
				//字体颜色
				ctx.fillStyle = textFillStyle
				//填充字体
				ctx.fillText(textName, x, y)
			}
		}
	}
</script>

<style lang="scss">
	.isding {
		overflow: hidden;
		height: 100vh;
	}

	.block_1 {
		text-align: center;

		.img1 {
			width: 630rpx;
			height: 684rpx;
		}

		.block {
			width: 630rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 8rpx solid #FFFFFF;
			margin: -6rpx auto;

			.img1 {
				width: 302rpx;
				height: 104rpx;
				margin-top: 50rpx;
			}

			.img2 {
				width: 140rpx;
				height: 140rpx;
			}

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				margin: 20rpx auto;
			}
		}

		.btn {
			width: 490rpx;
			height: 80rpx;
			background: #000000;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			margin: 20rpx auto;

		}

		.btn1 {
			width: 260rpx;
			height: 80rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #000000;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 80rpx;
			text-align: center;
			margin: 40rpx auto;
		}
	}

	.block_2 {
		width: 630rpx;
		height: 280rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 8rpx solid #FFFFFF;
		margin: 32rpx auto;

		.items {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-top: 38rpx;
			margin-left: 44rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;

			}
		}
	}

	.block_3 {
		min-height: 100vh;
		background: #F6F6F6;

		.b1 {
			background: #29A85C;
			height: 250rpx;
			box-sizing: border-box;
			padding-top: 36rpx;

			.tit_flex {
				display: flex;
				align-items: center;
				margin: 0rpx 60rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.test {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 52rpx;
					color: #000000;
					margin-left: 15rpx;
				}
			}
		}

		.b2 {
			width: 710rpx;
			height: 220rpx;
			margin: 40rpx auto;
			position: relative;

			image {
				width: 710rpx;
				height: 220rpx;
			}

			.abs {
				position: absolute;
				top: 0;
				width: 710rpx;
				height: 220rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.img1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 24rpx auto;

					.p1 {
						font-family: 'DINB';
						font-weight: bold;
						font-size: 80rpx;
						color: #1E703F;
						line-height: 80rpx;
					}

					.btn {
						width: 168rpx;
						height: 68rpx;
						background: #000000;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 68rpx;
						text-align: center;
					}
				}
			}
		}

		.b3 {
			padding: 170rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.img1 {
				image {
					width: 340rpx;
					height: 480rpx;
					display: block;
				}
			}

			.img2 {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				image {
					display: block;
					width: 340rpx;
					height: 220rpx;
				}
			}
		}
	}

	.popup {
		width: 600rpx;

		.popimg {
			position: relative;

			image {
				width: 600rpx;
				height: 1220rpx;
				font-size: 0%;
			}
		}

		.btn {
			width: 600rpx;
			bottom: 20rpx;
			position: absolute;
			color: #FFFFFF;
			line-height: 60rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.icon {
			text-align: center;
			margin: 20rpx auto;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}
</style>